<template>
  <div id="hot">
    <!-- 热门标题-->
    <div class="title-wrap">
      <div class="tit-icon"><img src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt=""></div>
      <div class="title">本周热门榜单</div>
      <div class="all"><a href="#">全部榜单</a><span class="iconfont icon-right"></span></div>
    </div>
    <!-- 热门内容-->
    <div class="swiper-wrap">
      <swiper :options="swiperOption">
        <swiper-slide v-for="item of hotUrl" :key="item.id">
          <div class="items">
            <div class="item">
              <img class="top-img" :src="item.topImgUrl" alt="">
              <img :src="item.imgUrl" alt="">
            </div>
            <div class="info-title">
              {{item.title}}
            </div>
            <div class="price">
              <span class="fuhao">¥{{item.price}}</span><span class="qi">起</span>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!-- 占位-->
    <div class="zhanwei"></div>
  </div>
</template>

<script>
export default{
  name: 'hot',
  props: {
    hotUrl: Array
  },
  data () {
    return {
      swiperOption: {
        freeMode: true,
        freeModeMinimumVelocity: 0,
        slidesPerView: 3,
        spaceBetween: 0
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../../assets/style/stylus'
  .title-wrap
    padding: 0 10px;
    line-height: 45px;
    overflow hidden
    .tit-icon img
      width: 15px;
      height: 15px;
      margin: 0 2px;
    .tit-icon,.title
      float left
    .all,.icon-right
      color #616161
      float right
      font-size: 12px;
  .swiper-wrap
    padding-right 10px
  .items
    margin-left: 10px
    color $fontSize
    padding-bottom: 10px;
    .info-title,.price
      text-align center
      font-size 14px
      margin: 2px;
      shenglue()
      .qi
        color #616161
      .fuhao
        color #f60
  .item img:nth-of-type(2)
    width: 100%;
  .top-img
    position absolute
    width: 42px;
    height: 20px;
  img[src = ""],img:not([src])
    opacity:0
    display:none
  .zhanwei
    zhanwei()
</style>
